https://jsfiddle.net/x5ue890v/1/
I have some sticky icons on my Wordpress site but how do I hide them based on "click" on the screen. Above link show you what I want to achieve.
I add:
html,body{
width:100%;
height:100%;
}
to my theme CSS and:
function social_effect() { ?>
<script>
$('body').click(function() {
$('.ct-socials').toggle();});
</script>
<?php }
add_action('wp_head','social_effect');
to my theme "function.php" but doesn't work... Any solution?
<div class="ct-socials std-tab-slide">My Social Icon</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
Just add this JavaScript line before the function
Here try this. I dont't have all your code but this should work. Add all your script library inside the head or on top of your functions. Let me know
$(document).ready(function(){
$('body').click(function() {
$('.ct-socials').toggle();
});
});.ct-socials {
width:300px;
height:200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button>Click ME </button>
<div class="ct-socials std-tab-slide">
<div>My Social Icon</div>
<div>My Social Icon</div>
</div>
</body>